<div class="google-map-canvas" id="map_canvas" style="position: absolute; width:100%;height:400%; z-index: 0;top: 0%; left: 0%;right: 0%;bottom: 0%;"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<!-- GOOGLE FONT -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,300,400,700">

<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/font-awesome.min.css">

<!-- SmartAdmin Styles : Please note (smartadmin-production.css) was created using LESS variables -->
<link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-production.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-skins.css">

<script src="js/google-map.js"></script>
<script>

        var directionsDisplay,
                directionsService;
        var map;
        var geocoder;
        var markers = [];
        var markersLunes=[];
        var markersMartes=[];
        var markersMiercoles=[];
        var markersJueves=[];
        var markersViernes=[];
        var markersCtaClave = [];
        
        
        function initialize() {
            geocoder = new google.maps.Geocoder();
            var directionsService = new google.maps.DirectionsService();
            directionsDisplay = new google.maps.DirectionsRenderer();
            var chicago = new google.maps.LatLng(-0.218269, -78.527174);
            var mapOptions = {
                zoom: 12,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                panControl: true,
                zoomControl: true,
                scaleControl: true,
                center: chicago
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); directionsDisplay.setMap(map);


            var usuarios = $("#filtro_usuarios").val();
            var indicador = $("#filtro_indicador").val();
            var f_d = $("#my_start_date").val();
            var f_h = $("#my_end_date").val();
            var f_d = replaceall(f_d, '/', '-');
            var f_h = replaceall(f_h, '/', '-');
            var ef= 0;
            var no_ef = 0;
            var valor_pedidos = 0.00;
            var color_descripcion = {};
            var desc_ = '';
            var desc_locales = '';
            
                                   
            
          //  alert( f_nd);
          /*  $.get( "/supervision.html", function( data ) {
                alert(callback(data.usuarios) );
            });*/
            var url = serviciosRest.urlmaster+serviciosRest.urlAmbiente+"AgenteSupervision.aspx?usu=" + usuarios + "&ind=" + indicador + "&f_i=" + f_d + "&f_f=" + f_h + "&callBack=";
            //alert(url);
            //var markers = [];

            $.getJSON(url + "?", function (result) {
                //alert(result.length);
                for (var i = 0; i <= result.length; i++) {
                    var lat = result[i].loc_latitud;
                    var long = result[i].loc_longitud;
                    var latlng = new google.maps.LatLng(parseFloat(lat), parseFloat(long));
                    // alert(latlng);
                    //var letra;
                    //if (result[i].par_descripcion = "")
                    //{ letra }

                    if (result[i].loc_telefono1 != null) {
                        addMarker(latlng, result[i].loc_nombre, i, "CODIGO: " + result[i].loc_id_cod1 + "</br>" + "PEDIDO: " + result[i].ped_id + "  VALOR: " + result[i].valor.toFixed(2) + "</br>" + result[i].loc_nombre + "</br>" + "TELF:" + result[i].loc_telefono1, "" + (i + 1), result[i].color); //latitud-longitud,?, nombre local mouse over,datos en el onclick,letra en icono, color de icono puntilleo
                        //alert('bandera 1' + result[i].loc_latitud + '---'` + result[i].loc_longitud);
                    }
                    else
                        addMarker(latlng, result[i].loc_nombre, i, "CODIGO: " + result[i].loc_id_cod1 + "</br>" + "PEDIDO: " + result[i].ped_id + "  VALOR: " + result[i].valor.toFixed(2) + "</br>" + result[i].loc_nombre, "" + (i + 1), result[i].color); //latitud-longitud,?, nombre local mouse over,datos en el onclick,letra en icono, color de icono puntilleo

                    desc_locales = desc_locales + '<tr onclick = "javascript:google.maps.event.trigger(markers[' + i + '],\'click\');"><td>' + (i + 1) + '</td> <td>' + result[i].loc_id_cod1 + '</td> <td>' + result[i].ped_id + '</td> <td>' + result[i].loc_nombre + '</td> <td>' + result[i].loc_direccion + '</td> <td>' + result[i].par_descripcion + '</td> <td>' + result[i].loc_telefono1 + '</td> <td>' + result[i].valor.toFixed(2) + '</td></tr>';

                    if (result[i].par_descripcion == "VENTA") {
                        ef = ef + 1;
                        valor_pedidos = valor_pedidos + result[i].valor;
                    }
                    else {
                        no_ef = no_ef + 1;
                    }

                    if (color_descripcion[result[i].par_descripcion] === undefined) {
                        color_descripcion[result[i].par_descripcion] = result[i].color;                        
                        desc_ = desc_ + '<tr><td><img src= "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=A|' + result[i].color + '|000000" /></td><td><p class="text-left"><p class="text-primary">' + result[i].par_descripcion + '</span></p></p></td></tr>';
                    }

                    if (i == (result.length - 1)) {
                        carga_info(ef, no_ef, valor_pedidos);
                                               
                        carga_desc(desc_);
                        carga_lst_locales(desc_locales);
                        
                    }

                }



                function addMarker(latlng, myTitle, index, info, letter, color) {
                    var i = 49;
                    var ic = i + index;
                    var marker = new google.maps.Marker({
                        position: latlng,
                        map: map,
                        title: myTitle,
                        //icon: 'http://maps.google.com/mapfiles/kml/pal4/icon'+ic+'.png'
                        icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=' + letter + '|' + color + '|000000'
                    });
                    google.maps.event.addListener(marker, 'click', function () {
                        /*map.setZoom(18);
                        map.setCenter(marker.getPosition());*/
                        var infowindow = new google.maps.InfoWindow();
                        var adress;
                        var latlng = new google.maps.LatLng(parseFloat(this.getPosition().lat()), parseFloat(this.getPosition().lng()));
                        geocoder.geocode({ 'latLng': latlng }, function (results, status) {
                            if (status === google.maps.GeocoderStatus.OK) {
                                if (results[0]) {
                                    //map.setZoom(18);
                                    map.setCenter(marker.getPosition());
                                    adress = results[0].formatted_address;
                                    $('#marker_adress').val(adress);
                                    infowindow.setContent(info + '<br>' + results[0].formatted_address);
                                    infowindow.open(map, marker);
                                }
                                else {
                                    alert('No results found');
                                }
                            } else {
                                alert('FALLA DE CONEXION: ' + status);
                                //alert('Geocoder failed due to: ' + status);
                            }
                        });
                        //latLong
                        $('#marker_lat').val(marker.getPosition().lat());
                        $('#marker_lng').val(marker.getPosition().lng());

                    });
                    markers.push(marker);
                }

            });                       	// end get data

            
            
                    
             //esto centra el mapa en los limites de el arreglo markers
            if(markers.length!=0){ 
                var bound = new google.maps.LatLngBounds();
                 for (i = 0; i < markers.length; i++){
                     bound.extend(markers[i].getPosition());
                 }
                 // Now set the bounds for the map
                 map.fitBounds(bound);
            }
            var toggleVisibility = function(show, markers){
                for (var i = 0, length = markers.length; i < length; i++)
                    markers[i].setVisible(show);
            }
        
            $('#ctaClave').on('change', function(){
                toggleVisibility(this.checked, markersCtaClave)
            });
            $('#lunes').on('change', function(){
                toggleVisibility(this.checked, markersLunes)
            });
            $('#martes').on('change', function(){
                toggleVisibility(this.checked, markersMartes)
            });
            $('#miercoles').on('change', function(){
                toggleVisibility(this.checked, markersMiercoles)
            });
            $('#jueves').on('change', function(){
                toggleVisibility(this.checked, markersJueves)
            });
            $('#viernes').on('change', function(){
                toggleVisibility(this.checked, markersViernes)
            });

            //----------------------------------------------------------------------------  CARGA INFORMACION   ----------------------------------------------------------------------
            //var efectivos = 0;
            //var no_efectivos = 0;
            function carga_info(efect, no_efect, valor) {
                
                var tabla_info = '<table class="table eg-1"><tbody><tr><td><p class="text-left">'
            + '<p class="text-primary">Visitados:</span></p></p></td><td><p class="text-left"><h6> <p class="text-success">' + (efect + no_efect) + '</span></p></h6></p></td></tr>'
            + '<tr><td><p class="text-left"><p class="text-primary">Efectivos:</span></p></p></td><td><p class="text-left"><h6>  <p class="text-success">' + (efect) + '</span></p></h6></p></td></tr>'
            + '<tr><td><p class="text-left"><p class="text-primary">No Efectivos:</span></p></p></td><td><p class="text-left"><h6>  <p class="text-success">' + (no_efect) + '</span></p></h6></p></td></tr>'
            + '<tr><td><p class="text-left"><p class="text-primary">Total:</span></p></p></td><td><p class="text-left"><h6> <p class="text-success">$' + valor.toFixed(2) + '</span></p></h6></p></td></tr></tbody></table>';

                $('#hoy').html(tabla_info);
                //alert('' + tabla_info);
            }
            function carga_lst_locales(detalle) {
                var tabla_desc = '<table id="dt_locales" class="table table-bordered table-hover">'
                                + '<thead><tr><th>#</th> <th>Codigo</th> <th>Pedido</th> <th>Local</th> <th>Direcci&oacute;n</th> <th>Tipo Pedido</th> <th>Tel&eacute;fono</th> <th>Valor</th></tr> </thead><tbody>' 
                                + detalle 
                                + '</tbody></table>'
                $('#dt_locales').html(tabla_desc);     
                //alert(''+tabla_desc);
            }

            function carga_desc(detalle) {
                var tabla_desc = '<table class="table eg-1">' + detalle + '</table>'
                $('#info').html(tabla_desc);                
                //alert('' + tabla_desc);
            }
            //------------------------------------------------------------------------------------------------------------------------------------------------------------------------


    
            }
            
/*
            google.maps.event.addDomListener(window, "resize", function() {
                var center = map.getCenter();
                google.maps.event.trigger(map, "resize");
                map.setCenter(center); }
            );
            */
            
                              
        $(document).ready(function(){        
            $("#flip").click(function(){
                $("#ruta").hide("slow");
                $("#panel").slideToggle("slow");
                $("#ayuda_colores").slideToggle("slow");
                $("#panel_info").hide();
            });
        });


        function replaceall(str,replace,with_this)
        {
            var str_hasil ="";
            var temp;

            for(var i=0;i<str.length;i++) // not need to be equal. it causes the last change: undefined..
            {
                if (str[i] == replace)
                {
                    temp = with_this;
                }
                else
                {
                    temp = str[i];
                }

                str_hasil += temp;
            }

            return str_hasil;
        }

</script>
        <div id="flip" style="position: absolute; top: 30px; right: 50%; margin-right: -50%;  width: 200px; z-index: 8; padding:1px; text-align:center; background-color:rgba(255,255,255,0.6); border:solid 1px #c3c3c3;"><p class="txt-color-blueDark"><span class="font-md">Hoy</span></p>
        </div>
        <div id="panel" style="display:none; position: absolute; top: 70px; right: 50%; margin-right: -50%; width: 200px; z-index: 7;  background-color:rgba(255,255,255,0.6); padding: 1px; border: 1px solid #999;">
                <div id="hoy">
                  <table class="table eg-1">
                      <tbody>
                      <tr>
                          <td>
                              <p class="text-left">
                              <p class="text-primary">Visitados:</span></p>
                              </p>
                          </td>
                          <td>
                              <p class="text-left">
                             <h6> <p class="text-success">1</span></p></h6>
                              </p>
                          </td>

                      </tr>
                      <tr>
                          <td>
                              <p class="text-left">
                              <p class="text-primary">Efectivos:</span></p>
                              </p>
                          </td>
                          <td>
                              <p class="text-left">
                              <h6>  <p class="text-success">1</span></p></h6>
                              </p>
                          </td>

                      </tr>
                      <tr>
                          <td>
                              <p class="text-left">
                              <p class="text-primary">No Efectivos:</span></p>
                              </p>
                          </td>
                          <td>
                              <p class="text-left">
                              <h6>  <p class="text-success">1</span></p></h6>
                              </p>
                          </td>

                      </tr>
                      <tr>
                          <td>
                              <p class="text-left">
                              <p class="text-primary">Total:</span></p>
                              </p>
                          </td>
                          <td>
                              <p class="text-left">
                              <h6> <p class="text-success">$0.00</span></p></h6>
                              </p>
                          </td>

                      </tr>
                      </tbody>
                  </table>
                </div>
        </div>

        <!-- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->
        <!-- -----------------------------------------------------------------------------      cuadro informacion colores      ------------------------------------------------------------------------------- -->
        <!-- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->

        <div id="ayuda_colores" 
            style="position: absolute; top: 85px; right: 50%; margin-right: -50%; width: 200px; z-index: 5; padding:1px; background-color:rgba(255,255,255,0.6); border:solid 1px #c3c3c3;">
                    <p class="txt-color-blueDark">
                <span class="font-md">Informaci&oacute;n Puntilleo</span></p>   
        </div>
                                
        <div id="panel_info" style="display: none; position: absolute; right: 50%; margin-right: -50%; top: 125px;  width: 200px; z-index: 7;  background-color:rgba(255,255,255,0.6); padding: 1px; border: 1px solid #999;">
          <div id="info">
            <table class="table eg-1">
                <tr>
                    <td>
                        <img src= "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=A|0000F0|000000" />
                    </td>
                    <td>
                        <p class="text-left">
                            <p class="text-primary">N/A</p>
                        </p>                        
                    </td>
                </tr>
                
                

            </table>
          </div>
        </div>
                
        
         <!-- ------------------------------------------------------------------------------------------------------------------------------------------- -->
         <!-- Widget ID (each widget will need unique ID)-->
						    <div class="jarviswidget jarviswidget-color-darken" id="lista" data-widget-editbutton="false"
                            style=" position: absolute; top: 400px; left: 50%; margin-left: -50%; overflow-y:scroll; height: 210px " >
								
								<header>
									<span class="widget-icon"> <i class="fa fa-table"></i> </span>
									<h2>Lista de Locales</h2>
				
								</header>
				
								<!-- widget div-->
								<div>
				
									<!-- widget edit box -->
									<div class="jarviswidget-editbox">
										<!-- This area used as dropdown edit box -->
				
									</div>
									<!-- end widget edit box -->
				
									<!-- widget content -->
									<div id = "lst_locales" class="widget-body no-padding">										
										
										<table id="dt_locales" class="table table-bordered table-hover">
											<thead>
												
											</thead>
											<tbody>
											
																								
											</tbody>
										</table>
				
									</div>
									<!-- end widget content -->
				
								</div>
								<!-- end widget div -->
				
							</div>
							<!-- end widget -->
         <!-- ------------------------------------------------------------------------------------------------------------------------------------------- -->

    <!-- PAGE RELATED PLUGIN(S) -->
		
    <script src="js/plugin/datatables/jquery.dataTables-cust.js" type="text/javascript"></script>
    <script src="js/plugin/datatables/ColReorder.min.js"></script>
	<script src="js/plugin/datatables/FixedColumns.min.js"></script>
	<script src="js/plugin/datatables/ColVis.min.js"></script>
	<script src="js/plugin/datatables/ZeroClipboard.js"></script>
	<script src="js/plugin/datatables/media/js/TableTools.min.js"></script>
	<script src="js/plugin/datatables/DT_bootstrap.js"></script>

    <script>

       

      $(document).ready(function(){
        $("#abre_list").click(function(){
          $("#leyenda").hide("slow");
          $("#lista").slideToggle("slow");

        });        
      });
      $(document).ready(function(){
        $("#abre_leyenda").click(function(){
          $("#ruta").hide("slow");
          $("#leyenda").slideToggle("slow");
        });        
      });
      $(document).ready(function(){
        $("#abre_ruta").click(function(){
          $("#leyenda").hide("slow");
          $("#panel").hide("slow");
          $("#ruta").slideToggle("slow");
        });
      });

      $(document).ready(function () {
          $("#ayuda_colores").click(function () {
              //$("#panel_info").hide("slow");
              $("#panel_info").slideToggle("slow");
          });
      });
      </script>
 